<template>
  <div class="scoreboard">
    <div class="left-section">
      <div class="score-category" @click.prevent="() => goRouter('/live?type=1')">
        <span class="icon">⚽</span> 足球直播 <span class="hot">🔥</span>
      </div>
      <div class="score-category" @click.prevent="() => goRouter('/live?type=2')">
        <span class="icon">🏀</span> 篮球直播 <span class="hot">🔥</span>
      </div>
      <div class="score-category" @click.prevent="() => goRouter('/live?type=3')">
        <span class="icon">🎾</span> 网球直播
      </div>
      <div class="score-category" @click.prevent="() => goRouter('/live?type=4')">
        <span class="icon">⚾</span> 棒球直播
      </div>
      <div class="score-category" @click.prevent="() => goRouter('/live?type=5')">
        <span class="icon">🎮</span> 电竞直播
      </div>
    </div>
    <div class="middle-section">
      <div class="score-item" v-for="(res, index) in basketballLeagues" :key="index">
        <img :src="'https://www.tbninduh.com' + res.icon.srcset1x" />
        <span> {{ res.name }}</span>
      </div>
    </div>
    <div class="middle-section">
      <div class="score-item" v-for="(res, index) in esportsGames" :key="index">
        <img :src="'https://www.tbninduh.com' + res.icon.srcset1x" />
        <span> {{ res.name }}</span>
      </div>
    </div>
    <div class="right-section">
      <div class="app-download">
        <p class="download-title">懂体育APP下载</p>
        <img src="@/assets/imgs/qrcode.png" alt="QR Code" class="qr-code" />
        <p class="download-tips">扫描下载懂体育完整版APP</p>
        <a href="https://download.dtiyu.com" class="download-link">download.dtiyu.com</a>
      </div>
      <!-- <div class="phone-mockup">
        <img src="path-to-phone-mockup.png" alt="Phone Mockup" />
      </div> -->
    </div>
  </div>
</template>

<script>
// import { useRoute } from 'vue-router'
export default {
  name: 'Scoreboard',
  data() {
    return {
      basketballLeagues: [
        {
          name: 'NBA',
          icon: {
            srcset1x:
              '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FNBA%402x.a4e99720.png&w=32&q=75',
            srcset2x: '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FNBA%402x.a4e99720.png&w=48&q=75'
          }
        },
        {
          name: 'CBA',
          icon: {
            srcset1x:
              '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FCBA%402x.aedab982.png&w=32&q=75',
            srcset2x: '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FCBA%402x.aedab982.png&w=48&q=75'
          }
        },
        {
          name: 'WNBA',
          icon: {
            srcset1x:
              '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FWNBA%402x.1df6cd90.png&w=32&q=75',
            srcset2x:
              '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FWNBA%402x.1df6cd90.png&w=48&q=75'
          }
        },
        {
          name: 'NCAA',
          icon: {
            srcset1x:
              '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FNCAA%402x.779be30a.png&w=32&q=75',
            srcset2x:
              '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FNCAA%402x.779be30a.png&w=48&q=75'
          }
        }
      ],
      esportsGames: [
        {
          name: 'DOTA2',
          icon: {
            srcset1x:
              '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdota2%402x.6da2509f.png&w=32&q=75',
            srcset2x:
              '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdota2%402x.6da2509f.png&w=48&q=75'
          }
        },
        {
          name: 'LOL',
          icon: {
            srcset1x:
              '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FLOL%402x.e6c6828e.png&w=32&q=75',
            srcset2x: '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FLOL%402x.e6c6828e.png&w=48&q=75'
          }
        },
        {
          name: 'CSGO',
          icon: {
            srcset1x:
              '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FCSGO%402x.22ae2c8d.png&w=32&q=75',
            srcset2x:
              '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FCSGO%402x.22ae2c8d.png&w=48&q=75'
          }
        },
        {
          name: 'KOG',
          icon: {
            srcset1x:
              '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FKOG%402x.49a52192.png&w=32&q=75',
            srcset2x: '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FKOG%402x.49a52192.png&w=48&q=75'
          }
        }
      ]
    }
  },
  methods: {
    goRouter(path) {
      // const route = useRoute()
      this.$router.push(path)
    }
  }
}
</script>

<style scoped lang="scss">
.scoreboard {
  display: flex;
  justify-content: space-between;
  //   padding: 20px;
  // background-color: #f9f9f9;
  width: 1200px;
  margin: 0 auto;
  padding-top: 30px;
}

.left-section,
.middle-section,
.right-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.left-section {
  width: 20%;
}

.middle-section {
  width: 15%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.right-section {
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.score-category {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  cursor: pointer;
  font-family:
    PingFang SC,
    PingFang SC;
  // font-weight: 800;
  font-size: 22px;
  color: #525a79;
  .icon {
    margin-right: 10px;
  }
  &:hover {
    color: #16b13a;
  }
  .hot {
    margin-left: 5px;
    color: red;
  }
}

.score-item {
  margin-bottom: 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
  img {
    width: 20px;
    margin-right: 10px;
  }
}

.app-download {
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  .qr-code {
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
  }
  .download-title {
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 800;
    font-size: 24px;
    color: #525a79;
  }
  .download-tips {
    width: 210px;
    height: 36px;
    background: linear-gradient(270deg, #16b13a 0%, #80e197 100%);
    border-radius: 20px 20px 20px 20px;
    font-weight: 800;
    font-size: 14px;
    color: #ffffff;
    line-height: 36px;
    text-align: center;
  }
  p {
    font-size: 20px;
    margin: 5px 0;
  }

  .download-link {
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 800;
    font-size: 14px;
    color: #16b13a;
    line-height: 16px;
    text-align: right;
    font-style: normal;
    text-decoration-line: underline;
    text-transform: none;
  }
}

.phone-mockup img {
  height: auto;
  max-width: 100%;
}
</style>
